<template>
    <div class="miaosha">
        <div class="top">
            <span>商品秒杀</span>
            <div class="time"><span class="word">8</span></div>
            <van-count-down :time="time" style="display: inline-block;">
                <template #default="timeData">
                    <span class="block">{{ timeData.hours }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.minutes }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.seconds }}</span>
                </template>
            </van-count-down>
           <div class="you"><van-icon name="arrow" size="10px" style="position: absolute; top:1.5px;left: 2px;" /></div>
        </div>
        <div class="bottom">
            <van-grid style="flex-wrap: nowrap;">
                <van-grid-item v-for="item in MiaoShaList" :key="item.id">
                    <van-image  style="width: 42px; height: 42px;" :src="item.picture" />
                    <p class="miao-list-text">{{ item.price }}</p>
                </van-grid-item>
               
            </van-grid>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {ref,onMounted} from 'vue'
import { getMiaoShaList } from "@/apis/miaoSha"
 const time = ref(3 * 60 * 60 * 1000);

 interface miao {
    price:string,
    picture:string
 }

 let MiaoShaList = ref<miao[]>()
//  console.log(MiaoShaList)
 
 onMounted(async()=>{
    const res = await getMiaoShaList()
    // console.log(res)
    MiaoShaList.value=res.result

 })
 
</script>

<style lang="scss" scoped>
.miaosha{
    width: calc(100% - 20px);
    height: 160px;
    margin: 0 10px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
     
    >.top{
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        position: relative;
      
        > span{
            margin-left: 10px;
            margin-right: 10px;
            font-weight: 700;
        }
    }
    >.bottom{
        width: 100%;
        flex: 1;
        overflow: auto;
        background-color: #fff;
    }
    .time{
        height: 100%;
        color: #fc4249;
        position: relative;
        margin-right: 46px;
    }
    .time::after{
        width: 22px;
        height: 18px;
        display: inline-block;
        content: '';
        background:url(https://wq.360buyimg.com/jdm-home-page/pages/images/seckill-time-to_1de70c91.png) no-repeat ;
        background-size: 22px 18px;
        position: absolute;
        top: 13px;
        left: 12px;
        
    }
    .word{
        position: absolute;
        margin-right: 10px;
        top: 10px;
        
    }
    .you{
        width: 15px;
        height: 15px;
        color:#fff;
        border-radius: 100%;
        background-color: #fc4249;
        text-align: center;
        line-height: center;
    
        position: absolute;
        right: 10px;
    }
    .miao-list-text{
        margin-top: 10px;
        color: red;
        font-weight: 600;
    }
}

</style>